<template>
    <div>
		<div class="table_wrap">
			<div class="page-title"><h3>{{title}}</h3></div>
			<Tables 
                class="style_c" 
                :title="'外网IP网段配置'"  
                :tableName="'wip'" 
                :butns="butns" 
                :field="field1"
                :tableData="wipTableData" 
                :curPage="wip_cur_page" 
                :pageSize="pageSize"
                :perNum="wip_size" 
                :totalNum="wip_total_num"
                :collectField="collect_field" 
                :clearSelectItems="selectedItems" 
                @reset="reset"
                :rankable="true"
                @rankData="handleRankData" 
                @loadData="_getWIPRange" 
                @sentSelectedItems="getSelectedItems" 
                @sentEditData="getEditData"
                @changePageSize="handleChangePageSize">
			</Tables>
			<Tables 
                class="style_c" 
                :title="'外网IP保留网段配置'" 
                :tableName="'nowip'" 
                :butns="butns" 
                :field="field2"
                :tableData="nowipTableData" 
                :curPage="nowip_cur_page"  
                :pageSize="pageSize"
                :perNum="nowip_size" 
                :clearSelectItem1="selectedItem1"
                :totalNum="nowip_total_num" 
                :collectField="collect_field" 
                @reset="reset"
                :rankable="true"
                @rankData="handleRankData" 
                @sentSelectedItem1="getSelectedItem1"
                @loadData="_getWIPReservedRange"
                @sentSelectedItems="getSelectedItems" 
                @sentEditData="getEditData"
                @changePageSize="handleChangePageSize">
			</Tables>
		</div>
        
        <Modals 
            :id="'modal'" 
            :title="add_title" 
            :field="table_name == 'wip' ? field1 : field2"
            :collectField="collect_field"
            :selectItem="select_item" 
            :status="status" 
            :errorMsg="errorMsg" 
            :type="type"
            :selectedItems="table_name == 'wip' ? selectedItems : selectedItem1" 
            :editData="edit_data" 
            @sentErrorMsg="getErrorMsg"
            @addEvent="handleAddWip"
            @editEvent="handleEditWip"
            @delEvent="handleDelWip">
        </Modals>
    </div>
</template>
<script>
    let field1 = [
        {
            type:'checkbox',
        },
		{
            type:'rank',
        },
        {
            type:'ipinput',
            label:'网段',
            name:'ip',          
            regex:/^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/,
            requried:true, 
            remark:'*必填'
        },
		{
            type:'ipinput',
            label:'掩码',
            name:'mask',
			regex: /^(254|252|248|240|224|192|128|0)\.0\.0\.0$|^(255\.(254|252|248|240|224|192|128|0)\.0\.0)$|^(255\.255\.(254|252|248|240|224|192|128|0)\.0)$|^(255\.255\.255\.(255|254|252|248|240|224|192|128|0))$/ ,
            requried:true, 
            remark:'*必填'  
        },
		{
            type:'ipinput',
            label:'网关地址',
            name:'gateway',
			regex:/^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/,
            requried:true, 
            remark:'*必填'  
        },		
        {
            type:'text',
            label:'VLAN',
            name:'vlan_id',
            regex: /^\d$|^[1-9]\d{0,2}$|^[1-3]\d{3}$|^40\d[0-4]$/,
            requried:true, 
            remark:'*必填(0~4094的整数)'  
        },
        {
            type:'select',
            label:'物理线路',
            name:'group_id',
            requried:true, 
            remark:'*必选'   
        }
    ]

     let field2 = [
        {
            type:'checkbox',
        },
		{
            type:'rank',
        },
        {
            type:'ipinput',
            label:'网段',
            name:'ip',          
            regex:/^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/,
            requried:true, 
            remark:'*必填'
        },
		{
            type:'ipinput',
            label:'掩码',
            name:'mask',
			regex: /^(254|252|248|240|224|192|128|0)\.0\.0\.0$|^(255\.(254|252|248|240|224|192|128|0)\.0\.0)$|^(255\.255\.(254|252|248|240|224|192|128|0)\.0)$|^(255\.255\.255\.(255|254|252|248|240|224|192|128|0))$/ ,
            requried:true, 
            remark:'*必填'  
        },
		// {
        //     type:'ipinput',
        //     label:'网关地址',
        //     name:'gateway',
		// 	regex:/^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/,
        //     requried:true, 
        //     remark:'*必填'  
        // },		
        {
            type:'text',
            label:'VLAN',
            name:'vlan_id',
            regex: /^\d$|^[1-9]\d{0,2}$|^[1-3]\d{3}$|^40\d[0-4]$/,
            requried:true, 
            remark:'*必填(0~4094的整数)'  
        },
        {
            type:'select',
            label:'物理线路',
            name:'group_id',
            requried:true, 
            remark:'*必选'   
        }
    ]
	import Tables from 'components/common/Tables'
    import Modals from 'components/common/Modals'
    import NetService from 'services/netService'
    import SystemService from 'services/systemService'

    import PageData from 'libs/PageData'
	
    export default {
		components: {
		    Tables,
            Modals
	    },
        data() {
            return {
                title: '网络配置',   
                add_title: '',  
                field1: field1,
                field2: field2,
                butns: [
                    {
                        type:'add',
                        name:'添加',
                        event:'addEvent',
                        icon:`/static/img/add.png`,
                        class:'add_btn',
                    },
                    {
                        type:'del',
                        name:'删除',
                        event:'delEvent',
                        icon:`/static/img/delete.png`,
                        class:'del_btn',
                    },
                    {
                        type:'edit',
                        name:'编辑',
                        event:'editEvent',
                        icon:`/static/img/modpic.png`,
                        class:'edit_btn',
                    }
                ],
                pageSize: [10, 20, 40, 80],
                cur_page: 1,             
                status: "",
                errorMsg: '',
                type: '',
                edit_data: {},
                select_item: [],
                collect_field: 'id',
                table_name: '',
   
                wip_cur_page: 1,
                wip_size: 10,
				wip_total_num: 0,
				wipTableData: [],  
                selectedItems: [],

                nowip_cur_page: 1,
                nowip_size: 10,
				nowip_total_num: 0,
				nowipTableData: [],
                selectedItem1: [],
                
                wip_order: 'desc',
                wip_by: '',
                nowip_order: 'desc',
                nowip_by: ''
            }
        },
        created() {
            this._getWIPRange({
                oper: 'load',
                page: this.wip_cur_page,
                size: this.wip_size,
                order: this.wip_order,
                by: this.wip_by
            })
            this._getWIPReservedRange({
                oper: 'load',
                page: this.nowip_cur_page,
                size: this.nowip_size,
                order: this.nowip_order,
                by: this.nowip_by
            })
            this.getLine() 
        },
        methods: {
            handleAddWip(params) {
                let data = Object.assign({}, params)
                data.group_id = data.group_id.replace(/[^0-9]/ig, "")  
                if (this.table_name === 'wip') {
                    data.oper = data.oper + "_wip"
                    this._createWIPRange(data)
                } else {
                    data.oper = data.oper + "_nowip"
                    this._createWIPReservedRange(data)
                }
            },
            handleEditWip(params) {
                let data = Object.assign({}, params)
                data.group_id = data.group_id.replace(/[^0-9]/ig, "") 
                if (this.table_name === 'wip') {
                    data.oper = data.oper + "_wip"
                    this._updateWIPRange(data)
                } else {
                    data.oper = data.oper + "_nowip"
                    this._updateWIPReservedRange(data)
                }
            },
            handleDelWip(params) {
                if (this.table_name === 'wip') {
                    params.oper = params.oper + "_wip"
                    this._destroyWIPRange(params)
                } else {
                    params.oper = params.oper + "_nowip"
                    this._destroyWIPReservedRange(params)
                }
            },
            handleRankData(params, tableName) {
				if (tableName === 'wip') {
					params.page = this.wip_cur_page
					params.size = this.wip_size
					this.wip_order = params.order 
					this.wip_by = params.by
					this._getWIPRange(params)
				} else {
					params.page = this.nowip_cur_page
					params.size = this.nowip_size
					this.nowip_order = params.order
					this.nowip_by = params.by
					this._getWIPReservedRange(params)
				}
			},
            handleChangePageSize(page, size, tableName) {
                if (tableName === 'wip') {
                    this.wip_cur_page = page
                    this.wip_size = size
                    let params = {
						page: this.wip_cur_page,
						size: this.wip_size,
						order: this.wip_order,
						by: this.wip_by
					}
                    this._getWIPRange(params)
                } else {
                    this.nowip_cur_page = page
                    this.nowip_size = size
                    let params = {
						page: this.nowip_cur_page,
						size: this.nowip_size,
						order: this.nowip_order,
						by: this.nowip_by
					}
                    this._getWIPReservedRange(params)
                }
            },
            _getWIPRange(params) {
                this.status = 'ing'  
                NetService.getWIPRange(params)
                    .then((res) => {
                        if (res.errcode === 0) {
                            this.status = 'ok'
                            let data = res['13'].data
                            this.wip_total_num = new PageData(data, this.wip_size).totalpage
                            let cur_page_date =  new PageData(data, this.wip_size).data(params.page)
                            let page = params.page ? params.page : this.wip_cur_page
                            if (!params.oper) {
                                params.oper = 'load'
                            }
                            if (params.oper.indexOf('add') >= 0) {//添加完到最新一页
                                page = this.wip_total_num
                            } else if (params.oper.indexOf('del') >= 0 && cur_page_date.length === 0 && page > 1) {//删除后当前页无数据，跳到前一页
                                page--
                            }
                            if (params.oper.indexOf('del') >=0 || params.oper.indexOf('edit') >= 0) {
                                this.selectedItems = []      
                            }
                            this.wip_cur_page = page
                            this.wipTableData = new PageData(data,this.wip_size).data(page).map((item) => { 
                                return {
                                    id: item.id,
                                    ip: item.ip,
                                    mask: item.mask,
                                    gateway: item.gateway,
                                    vlan_id: item.vlan_id,
                                    group_id: '线路' + item.group_id
                                }
                            })
                        } else {
                            this.status = 'error'
                            this.errorMsg = res.errorMessage	
                        }
                    })
            },  
            _createWIPRange(params) {
                params = {
                    13: `${params.ip}|${params.mask}|${params.gateway}|${params.vlan_id}|${params.group_id}`
                }
                NetService.createWIPRange(params)
                .then((res) => {
                        if (res.errcode === 0) {
                            this.$Message.success({
                                closable: true,
                                content: '添加成功！',
                                duration: 5
                            })
                            this._getWIPRange(params)
                        }
                })
            },
            _updateWIPRange(params) {
                params = {
                    13: `${params.id}|${params.ip}|${params.mask}|${params.gateway}|${params.vlan_id}|${params.group_id}`
                }
                NetService.updateWIPRange(params)
                    .then((res) => {
                        if (res.errcode === 0) {
                            this.$Message.success({
                                closable: true,
                                content: '修改成功！',
                                duration: 5
                            })
                            this._getWIPRange(params)
                        }
                    })
            },
            _destroyWIPRange(params) {
                params = {
                    13: params.ids
                }
                NetService.destroyWIPRange(params)
                    .then((res) => {
                        if (res.errcode === 0) {
                            this.$Message.success({
                                closable: true,
                                content: '删除成功！',
                                duration: 5
                            })
                            this._getWIPRange(params)
                        }
                    })
            },

            _getWIPReservedRange(params) { 
                this.status ='ing'  
                NetService.getWIPReservedRange(params)
                    .then((res) => {
                        if (res.errcode === 0) {
                            this.status ='ok'  
                            let data =  res['14'].data
                            this.nowip_total_num = new PageData(data, this.nowip_size).totalpage
                            let cur_page_date =  new PageData(data, this.nowip_size).data(params.page)
                            let page = params.page ? params.page : this.nowip_cur_page
                            if (!params.oper) {
                                params.oper = 'load'
                            }
                            if (params.oper.indexOf('add') >= 0) {//添加完到最新一页
                                page = this.nowip_total_num
                            } else if (params.oper.indexOf('del') >=0 && cur_page_date.length === 0 && page>1) {//删除后当前页无数据，跳到前一页
                                page--
                            }
                            if (params.oper.indexOf('del') >= 0 || params.oper.indexOf('edit') >= 0) {
                                this.selectedItem1 = []      
                            }
                            this.nowip_cur_page = page
                            this.nowipTableData =  new PageData(data, this.nowip_size).data(page).map((item) => { 
                                return {
                                    id: item.id,
                                    ip: item.ip,
                                    mask: item.mask,
                                    vlan_id: item.vlan_id,
                                    group_id: '线路' + item.group_id
                                }
                            })	
                        } else {
                            this.status ='error'
                            this.errorMsg = res.errorMessage	
                        }
                    })
            },
            
            _createWIPReservedRange(params) {
                params = {
                    14: `${params.ip}|${params.mask}|${params.vlan_id}|${params.group_id}`
                }
                NetService.createWIPReservedRange(params)
                    .then((res) => {
                        if (res.errcode === 0) {
                            this.$Message.success({
                                closable: true,
                                content: '添加成功！',
                                duration: 5
                            })
                            this._getWIPReservedRange(params)
                        }
                    })
            },
            _updateWIPReservedRange(params) {
                params = {
                    14: `${params.id}|${params.ip}|${params.mask}|${params.vlan_id}|${params.group_id}`
                }
                NetService.updateWIPReservedRange(params)
                    .then((res) => {
                        if (res.errcode === 0) {
                            this.$Message.success({
                                closable: true,
                                content: '修改成功！',
                                duration: 5
                            })
                            this._getWIPReservedRange(params)
                        }
                    })
            },
            _destroyWIPReservedRange(params) {
                params = {
                    14: params.ids
                }
                NetService.destroyWIPReservedRange(params)
                    .then((res) => {
                        if (res.errcode === 0) {
                            this.$Message.success({
                                closable: true,
                                content: '删除成功！',
                                duration: 5
                            })
                            this._getWIPReservedRange(params)
                        }
                    })
            },

            getErrorMsg(msg) {
                this.errorMsg = msg
            },
            getSelectedItems(selectedItems) {
                this.selectedItems = selectedItems
            },
            getSelectedItem1(selectedItem1) {
                this.selectedItem1 = selectedItem1
            },
            getEditData(editdata) {
                this.edit_data = editdata 
            },
            reset(type, table_name) {
                this.status = ""
                this.errorMsg = ''
                this.type = type
                this.table_name = table_name
                if (table_name === 'nowip') {     
                    this.add_title = "外网IP保留网段"
                } else {
                    this.add_title = "外网IP网段"
                } 
                $('.inputs_wrap .error_foramt').removeClass('error_foramt')
            }, 
            getLine() {
                SystemService.getLine()
                    .then((res) => {
                        if (res.errcode === 0) {
                            this.select_item = res.group_id.map((item) => {
                                return  '线路' + item
                            })
                        }
                    })
            },
            popoverShow(ele, content) {//删除弹窗
				$(ele).attr({
					'data-toggle': 'popover',
                    'data-placement':"bottom",
					'data-content': content
				}).popover('show')
				setTimeout(function() {
					$(ele).popover('destroy')
				}, 1500)
			},
        }
    }
</script>
<style scoped lang="less">
.table_wrap{
    background: #ffffff;
    margin: 30px;
}
table thead{
    border-bottom: none;
}
</style>